<template>
	<view>
		<goodsList :goods="goods" @goodsItemClick="goGoodsDetail"></goodsList>
		<view v-if="flag" class="bottom">-----我是有底线的-----</view>
	</view>
</template>

<script>
	import goodsList from "../../components/goods-list/goods-list.vue"
	export default {
		data() {
			return {
				page:1,
				goods:[],
				flag:false
			}
		},
		onLoad(){
			this.getGoodsList()
		},
		methods: {
			async getGoodsList(Callback){
				const res =await this.$myRequest({
					url:"/api/getgoods?pageindex="+this.page
				})
				this.goods=[...this.goods,...res.data.message]
				Callback && Callback();
			},
		goGoodsDetail(id){
			console.log(id);
			uni.navigateTo({
				url:"/pages/goods-detail/goods-detail?id="+id,
			})
		}
		},
		onReachBottom(){//下拉加载
			if(this.goods.length<this.page*10) return this.flag=true
				console.log('触底了');
				this.page++
				this.getGoodsList()
			
		},
		onPullDownRefresh(){//上拉刷新
			this.flag=false;
			this.page=1;
			this.goods=[];
			setTimeout(()=>{
				this.getGoodsList(()=>{
					uni.stopPullDownRefresh();
				})
			},1000)
			
		},
		components:{
			goodsList
		}
	}
</script>

<style>
	.bottom{
		background: #eee;
		font-size: 28rpx;
		text-align: center;
		padding: 10rpx 0 15rpx;
		color: #ccc;
	}
</style>
